import { Component, Input, ElementRef, ViewChild, OnInit, AfterViewInit, Renderer2 } from '@angular/core';
import { ApesGroupComponent } from './apes-group.component';


@Component({
  selector: 'apes-groups',
  template: `
    <div apes-row #groups [ngStyle]="{'margin-bottom':_mb}" [apesGutter]="_gutter">
      <div apes-col [apesLg]="group._col"  [apesMd]="24" [apesSm]="24" [apesXs]="24" apes-group-body [content]="group.content"
           *ngFor="let group of listOfApesGroup; let i = index">
      </div>
    </div>
  `,
  // tslint:disable-next-line:use-host-property-decorator
  host: {},

})
export class ApesGroupsComponent implements OnInit, AfterViewInit {
  public _gutter = 0;
  public _mb = '0px';

  @Input() height: number;

  @Input()
  set margin_botoom(value: number) {
    this._mb = value + 'px';
  }

  @Input()
  set gutter(value: number) {
    this._gutter = value;
  }


  public listOfApesGroup: ApesGroupComponent[] = [];


  @ViewChild('groups',{static:false})
  groupsDiv: ElementRef;


  addGroup(value: ApesGroupComponent): void {
    this.listOfApesGroup.push(value);
  }


  removeGroup(value: ApesGroupComponent): void {
    this.listOfApesGroup.splice(this.listOfApesGroup.indexOf(value), 1);
  }


  constructor(private templateRef: ElementRef, private  renderer: Renderer2) {
  }

  ngOnInit(): void {

  }

  ngAfterViewInit(): void {
    if (this.height > 0) {
      this.renderer.setStyle(this.groupsDiv.nativeElement, 'height', this.height + 'px');
      this.renderer.setStyle(this.groupsDiv.nativeElement, 'overflow-x', 'auto');
    }
  }

}
